﻿.youTubePlayer 
{
    
    background-color:#000;
    color:#fff;
    position:relative;
    
    -moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.8);
    -o-box-shadow:0 0 10px rgba(0, 0, 0, 0.8);
    -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.8);
    box-shadow:0 0 10px rgba(0, 0, 0, 0.8);
}

.youTubePlayer object 
{
    border:1px solid #FFFFFF;
    outline:1px solid #AAAAAA;
}

.youTubePlayer .controlDiv
{
    background:url(uTube/player-buttons.png) no-repeat 0 0;
    cursor:pointer; 
    display:none;
    left:50%;
    height:110px;
    margin:-55px 0 0 -55px;     /* Half of width & height for negative top & negative left margin - to center correctly */
    position:absolute;
    top:50%; 
    width:110px;
}

.progressBar
{
    background-color:#ccc;
    bottom:20px;
    cursor:pointer;
    display:none;
    height:10px;
    left:30px;
    overflow:hidden;
    position:absolute;
    right:105px;
    width:auto;
    
    /* A light CSS3 bottom highlight */
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    -o-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.3);
}

.progressBar .elapsed
{
    background-color:#1fa2f6;
    border-right:1px solid #49AFF0;
    height:100%;
    position:absolute;    
    width:0;
}

.youTubePlayer .muteControl
{ 
    background:url(uTube/sound.png) no-repeat 0 0;
    cursor:pointer;
    display:none;
    position:absolute;
    width:16px;
    height:16px;
    bottom:17px;
    left:10px;
}

.youTubePlayer .mute 
{
    background-position:0 0;
}
.youTubePlayer .unmute
{
    background-position:0 -16px;
}



/* -- Video Ready (Video ready to play) --*/
.ready
{
}

.ready .controlDiv
{
    background-position:0 0;
    display:block;    
}

.ready .progressBar
{
}

.ready .muteControl
{
}


/*-- Video Buffering -- */
.buffering
{
}

.buffering .controlDiv
{
}

.buffering .progressBar
{
}

.buffering .muteControl
{
}


/*-- Video Playing --*/
.playing
{
}

.playing .controlDiv
{
}

.playing:hover .controlDiv
{
    background-position:0 -110px;
    display:block;
}

.playing .progressBar
{
}

.playing:hover .progressBar
{
    display:block;
}

.playing .muteControl
{
}

.playing:hover .muteControl
{
    display:block;
}


/*-- Video Paused --*/
.paused
{
}

.paused .controlDiv
{
    background-position:0 0;
    display:block;
}

.paused .progressBar
{
    display:block;
}

.paused .muteControl
{
    display:block;
}


/* -- Video Ended --*/
.ended
{
}

.ended .controlDiv
{
    background-position:0 -220px;
    display:block;  
}

.ended .progressBar
{
}

.ended .muteControl
{
}
